<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="keywords" content="">  
    <meta name="description" content="">
	<title>无车族扎心图鉴</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="./css/public.css">
    <link rel="stylesheet" type="text/css" href="./css/pace-theme-center-simple.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/rem.js" type="text/javascript"></script>
    <script src="./js/pace.min.js" type="text/javascript"></script>
    <script src="./js/preload.js" type="text/javascript"></script>
    <script src="./js/swiper.js" type="text/javascript"></script>
    <script src="./js/erase.js" type="text/javascript"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
        wx.config({
            debug: false, // 开启调试模式调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印�?
            appId: 'wx3788608fd86507b8', // 必填，公众号的唯一标识
            timestamp: '{$arr.timestamp}', // 必填，生成签名的时间
            nonceStr: '{$arr.noncestr}', // 必填，生成签名的随机
            signature: '{$arr.sha1}',// 必填，签名，见附
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附
        });
        wx.ready(function () {
            wx.onMenuShareAppMessage({
                title: '@无车族，来不及了，快上车！', // 分享标题
                desc: '算算漫漫无车路，多少时光被辜负！快醒醒，解锁你的有车生活！', // 分享描述
                link: 'http://ca1.douyar.cc/ca1.php?step=zz', // 分享链接
                imgUrl: 'http://ca1.douyar.cc./img/fx.jpg', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {
                    //alert("取消成功");
                    // 用户取消分享后执行的回调函数
                }

            });
            wx.onMenuShareTimeline({
                title: '@无车族，来不及了，快上车！', // 分享标题
                link: 'http://ca1.douyar.cc/ca1.php?step=zz', // 分享链接
                imgUrl: 'http://ca1.douyar.cc./img/fx.jpg', // 分享图标
                success: function () {

                },
                cancel: function () {
                  //  alert("取消成功");
                    // 用户取消分享后执行的回调函数
                }
            });
        })
    </script>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?40c4649917e4d4a88e0818dab21c3c62";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <script>
        /*loading插件配置*/
        paceOptions = {
            elements: true,
            // restartOnRequestAfter: false
        }
        Pace.on('hide',function(){
            $("#but").css("-webkit-animation","rotating 1.5s 0s linear infinite");
            $('.loading').hide();
            $('.bg_shou').show();
        });
    </script>
</head>

<body> 
<div class="container"></div>
<input type="hidden" id="state" value="{$state}">
<input type="hidden" id="token" value="{$token}">
<input type="hidden" id="state" value="{$state}">
<audio src="./img/1.mp3" id="music" class="audio" autoplay="autoplay"  loop="loop" preload="auto" >
你的浏览器不支持video元素
</audio>
<div id="but" onclick="Play(this)"></div>
<!-- loading 背景-->
<div class="loading">
    <img src="./img/loading.png" alt="">
    <div>明日座驾正在驶来...</div>
</div>
{if $state == 0} 
<div class="follow" style="display: none;">
    <!-- 关注二维码？ -->
    <div class="mask"></div>
    <img src="./img/follow.png" alt="">
    <div class="close guan"></div>
</div>
 {/if}
<!-- 动漫浏览 -->
<div class="swiper-container swiper-container1" style="display: ;">
<div class="logo"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide page0">
            <img src="./img/back0.png" alt="" class="back0 back">
            <img src="./img/Twinkle.png" alt="" class="Twinkle0">
        </div>
        <div class="swiper-slide page1 stop-swiping">
            <img src="./img/back1.jpg" alt="" class="back1 back">
            <div class="skip1 skip"></div>
            <canvas id="canvas1" width="750" height="1206" class="canvas"></canvas>
            <div class="dialogue1"></div>
            <div class="dialogue2"></div>
            <div class="dialogue3"></div>
            <div class="dialogue4"></div>
            <div class="sweat1"></div>
            <div class="sweat2"></div>
            <div class="sweat3"></div>
            <div class="angry1"></div>
            <div class="angry2"></div>
            <div class="heart1"></div>
            <div class="heart2"></div>
            <div class="heart3"></div>
            <img src="./img/cashi.png" alt="" class="cashi">
            <img src="./img/Twinkle.png" alt="" class="Twinkle1 Twinkle">
        </div>
        <div class="swiper-slide page2 stop-swiping">
            <img src="./img/back2.jpg" alt="" class="back2 back">
            <div class="skip2 skip"></div>
            <canvas id="canvas2" width="750" height="1206" class="canvas"></canvas>
            <div class="dialogue5"></div>
            <div class="dialogue6"></div>
            <div class="dialogue7"></div>
            <div class="dialogue8"></div>
            <div class="ai"></div>
            <div class="xiang"></div>
            <div class="haha"></div>
            <div class="xiao"></div>
            <div class="lu"></div>
            <div class="qi"></div>
            <img src="./img/Twinkle.png" alt="" class="Twinkle2 Twinkle">
        </div>
        <div class="swiper-slide page3 stop-swiping">
            <img src="./img/back3.jpg" alt="" class="back3 back">
            <div class="skip3 skip"></div>
            <canvas id="canvas3" width="750" height="1206" class="canvas"></canvas>
            <div class="dialogue9"></div>
            <div class="dialogue10"></div>
            <div class="dialogue11"></div>
            <div class="dialogue12"></div>
            <div class="word1"></div>
            <div class="word2"></div>
            <div class="word3"></div>
            <div class="word4"></div>
            <div class="word5"></div>
            <div class="word6"></div>
            <div class="word7"></div>
            <div class="word8"></div>
            <div class="word9"></div>
            <div class="sweat4"></div>
            <div class="sweat5"></div>
            <div class="sweat6"></div>
            <div class="star"></div>
            <div class="musics"></div>
            <img src="./img/Twinkle.png" alt="" class="Twinkle3 Twinkle">
        </div>
        <div class="swiper-slide page4 stop-swiping">
            <img src="./img/back4.jpg" alt="" class="back4 back">
            <div class="skip4 skip"></div>
            <canvas id="canvas4" width="750" height="1206" class="canvas"></canvas>
            <div class="dialogue13"></div>
            <div class="dialogue14"></div>
            <div class="dialogue15"></div>
            <div class="dialogue16"></div>
            <div class="tanqi"></div>
            <div class="ku"></div>
            <div class="flower1"></div>
            <div class="flower2"></div>
            <div class="flower3"></div>
            <div class="flower4"></div>
            <div class="flower5"></div>
            <img src="./img/Twinkle.png" alt="" class="Twinkle4 Twinkle">
        </div>
        <div class="swiper-slide page5 stop-swiping">
            <img src="./img/back5.png" alt="" class="back5 back">
            <div class="skip5 skip"></div>
            <canvas id="canvas5" width="750" height="1206" class="canvas"></canvas>
            <div class="dialogue17"></div>
            <div class="dialogue18"></div>
            <div class="dialogue19"></div>
            <div class="dialogue20"></div>
            <div class="Sigh"></div>
            <!-- <div class="Surprise"></div> -->
            <div class="Whistle1"></div>
            <div class="Whistle2"></div>
            <div class="Whistle3"></div>
            <div class="Whistle4"></div>
            <div class="Whistle5"></div>
            <div class="Whistle6"></div>
            <img src="./img/Twinkle.png" alt="" class="Twinkle5 Twinkle">
        </div>
        <div class="swiper-slide page6">
            <!-- 选择模板 -->
            <div class="Template">
            	<div class="return"></div>
                <img src="./img/tishi.png" alt="" class="tishi">
                <div class="swiper-container swiper-container2" id="swip">
                    <div class="swiper-wrapper wrapper1">
                        <section class="swiper-slide " id="swiper-slide1" data-slide="0"></section>
                        <section class="swiper-slide " id="swiper-slide2" data-slide="1"></section>
                        <section class="swiper-slide " id="swiper-slide3" data-slide="2"></section>
                        <section class="swiper-slide " id="swiper-slide4" data-slide="3"></section>
                        <section class="swiper-slide " id="swiper-slide5" data-slide="4"></section>
                    </div>
                </div>
                <div class="sure"></div>
            </div>
        </div>
    </div>
</div>
<!-- 上传操作图片 -->
<div class="Synthesis" style="display: none;">
    <img src="" alt="" class="fales" style="display: none;">
    <canvas id="c2" width="750" height="1334"></canvas>
    <div class="upload"></div>
    <input id="upload"  class="upload1" name="file" type="file"  accept="image/*"  />
    <div class="generate" onclick="Synthesis(1)"></div>
    <div class="key"></div>
    <div style="width: 100%;text-align: center;color: #fff;font-size: .7rem;position: absolute;
    left: 0;right: 0;margin:auto;top: 35rem;">请手动调节照片大小</div>
</div>
<!-- 生成页面 -->
<div class="xz">
    <div class="bao">
        <img src="" alt="" id="screenShotImg">
        <div class="click" onclick="prize()"></div>
        <div class="fx"></div>
    </div>
    <img src="./img/fximg.png" alt="" class="fximg">
</div>
<!-- 中奖 -->
<div class="prize">
    <img src="" alt="" class="yuan">
    <div class="close"></div>
    <input type="text" class="phone" placeholder="请输入您的手机号">
    <div class="Determine"></div>
</div>
<!-- 未中奖 -->
<div class="file">
    <div class="close"></div>
</div>
<!-- 提交成功 -->
<div class="tjSuccess">
    <div class="close"></div>
</div>
<!-- alert -->
<div class="alert">
    <div class="dd"></div>
    <div class="closes"></div>
</div>

</body>
<script src="./js/alloy_finger.js" type="text/javascript"></script>
<script src="./js/alloy_paper.js" type="text/javascript"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/lrz.all.bundle.js" type="text/javascript"></script>
<script src="./js/Tween.js" type="text/javascript"></script>
<script src="./js/canvas.js" type="text/javascript"></script>
<script src="./js/domChange.js" type="text/javascript"></script>
<script>
erase('canvas1',1);
erase('canvas2',2);
erase('canvas3',3);
erase('canvas4',4);
erase('canvas5',5);
regSwiper();
var arr=[
    './img/loading.png',
    './img/1s.jpg',
    './img/2s.jpg',
    './img/3s.jpg',
    './img/4s.jpg',
    './img/5s.jpg',
    './img/Template1.png',
    './img/Template2.png',
    './img/Template3.png',
    './img/Template4.png',
    './img/Template5.png',
    './img/10yuan.png',
    './img/1yuan.png',
    './img/5yujan.png',
    './img/ai.png',
    './img/angry.png',
    './img/back0.png',
    './img/back1.jpg',
    './img/back2.jpg',
    './img/back3.jpg',
    './img/back4.jpg',
    './img/back5.png',
    './img/bag.png',
    './img/cilck.png',
    './img/comeIn.png',
    './img/Determine.png',
    './img/dialogue1.png',
    './img/dialogue2.png',
    './img/dialogue3.png',
    './img/dialogue4.png',
    './img/dialogue5.png',
    './img/dialogue6.png',
    './img/dialogue7.png',
    './img/dialogue8.png',
    './img/dialogue9.png',
    './img/dialogue10.png',
    './img/dialogue11.png',
    './img/dialogue12.png',
    './img/dialogue13.png',
    './img/dialogue14.png',
    './img/dialogue15.png',
    './img/dialogue16.png',
    './img/dialogue17.png',
    './img/dialogue18.png',
    './img/dialogue19.png',
    './img/dialogue20.png',
    './img/file.png',
    './img/flower.png',
    './img/follow.png',
    './img/fx.jpg',
    './img/fx.png',
    './img/fximg.png',
    './img/generate.png',
    './img/haha.png',
    './img/heart.png',
    './img/key.png',
    './img/ku.png',
    './img/last.png',
    './img/line.png',
    './img/lu.png',
    './img/musics.png',
    './img/page1.jpg',
    './img/qi.png',
    './img/return.png',
    './img/Sigh.png',
    './img/skip.png',
    './img/star.png',
    './img/sure.png',
    './img/Surprise.png',
    './img/sweat.png',
    './img/sweats.png',
    './img/Synthesis.jpg',
    './img/Synthesis.png',
    './img/tanqi.png',
    './img/tjSuccess.png',
    './img/Twinkle.png',
    './img/upload.png',
    './img/vague1.png',
    './img/vague2.png',
    './img/vague3.png',
    './img/vague4.png',
    './img/vague5.png',
    './img/Whistle.png',
    './img/word1.png',
    './img/word2.png',
    './img/word3.png',
    './img/word4.png',
    './img/word5.png',
    './img/word6.png',
    './img/word7.png',
    './img/word8.png',
    './img/word9.png',
    './img/xiang.png',
    './img/xiao.png',
    './img/cashi.png',
    './img/tishi.png',
]
//图片预加载
$.preload(arr, {
    minTimer: 3000,
    //每加载完一张执行的方法
    each: function (count) {
        // var percent = Math.round((count+1) / len * 100) + '%';
        // progressInner.css("width",percent);
        // progressTxt.html(percent);
    },
    // 加载完所有的图片执行的方法
    end: function () {
        console.log('预加载完成');
    }
});    
</script>
</html>













